<template>
	<cl-dialog
		title="打款"
		width="600px"
		:visible.sync="visible"
		@close="close"
		:before-close="beforeClose"
	>
		<el-form label-position="top" :model="form" ref="mform">
			<el-form-item label="打款日期" prop="back_date">
				<cl-date-picker
					v-model="form.back_date"
					type="date"
					placeholder="选择日期"
					value-format="yyyy-MM-dd"
					:picker-options="pickerOptions"
					style="width: 100%"
				/>
			</el-form-item>
			<el-form-item label="上传图片" prop="images">
				<cl-upload
					multiple
					:limit="3"
					:limit-size="3"
					list-type="picture-card"
					ref="uploads"
					v-model="form.images"
					:on-success="onUploadSuccess"
				/>
			</el-form-item>
			<el-form-item label="备注" prop="back_why">
				<el-input
					type="textarea"
					placeholder="请输入内容"
					:rows="3"
					v-model="form.back_why"
				/>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button type="primary" @click="submit">提交</el-button>
			<el-button @click="close">关闭</el-button>
		</template>
	</cl-dialog>
</template>
<script>
import qs from "qs";
import dayjs from "dayjs";
export default {
	data() {
		return {
			visible: false,
			data: null,
			detail: {
				images: []
			},
			form: {
				dep_id: "",
				back_date: dayjs().format("YYYY-MM-DD"),
				images: "",
				back_why: "",
				yn: 4
			},
			rules: {
				back_date: [{ required: true, message: "请选择打款日期" }],
				images: [{ required: true, message: "请上传打款图片" }],
				back_why: [{ required: true, message: "请填写退回原因" }]
			},
			saving: false,
			back_date: "",
			pickerOptions: {
				disabledDate: time => {
					return time.getTime() > Date.now() || time.getTime() < dayjs(this.back_date);
				}
			}
		};
	},
	methods: {
		open(data = {}) {
			this.visible = true;
			this.data = data;

			let { dep_id, back_date } = data;
			this.form.dep_id = dep_id;
			this.back_date = back_date;
		},
		beforeClose(done) {
			this.saving && done();
		},
		close() {
			this.visible = false;
			this.back_date = "";
			this.reset();
		},
		reset() {
			this.saving = false;
			this.$refs.mform.resetFields();
		},
		submit() {
			this.$refs["mform"].validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) {
					return;
				}

				if (this.data.order_id) {
				this.confirm(`订单是银联单号退款，操作后金额将原路退回，请确认！`)
					.then(async () => {
						this.saving = true;
						await this.$service.deposit.depositre(qs.stringify(this.form)).done(() => {
							this.saving = false;
						});
						this.close();
						this.$emit("success");
						this.$message.success("操作成功");
					})
				} else {
					this.saving = true;
					await this.$service.deposit.depositre(qs.stringify(this.form)).done(() => {
						this.saving = false;
					});
					this.close();
					this.$emit("success");
					this.$message.success("操作成功");
				}
			});
		},
		onUploadSuccess(res) {}
	}
};
</script>
